.root {
  display: flex;
  justify-content: center;
  padding: var(--space-9);
}

.guestTrigger {
  all: unset;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--gray-7);
  border-radius: var(--radius-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.guestTrigger svg {
  animation-duration: 300ms;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
.guestTrigger[data-state='open'] svg {
  animation-name: iconOpen;
  animation-fill-mode: forwards;
}
.guestTrigger[data-state='closed'] svg {
  animation-name: iconClosed;
}

@keyframes iconClosed {
  from {
    transform: translateY(-4px);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes iconOpen {
  0% {
    transform: translateY(4px) rotate(180deg);
  }

  to {
    transform: translateY(0) rotate(180deg);
  }
}
